"use client";
/* eslint-disable @next/next/no-img-element */
import { claimActivityReward } from "@/api/activity";
import { UserVipInfo } from "@/api/user";
import GlobalNotify from "@/components/ModalPopup/GlobalNotifyModal";
import { BoxListCom } from "@/components/ModalPopup/SignInModal";
import { useSignStore } from "@/stores/useSignStore";
import { formatAmount } from "@/utils";
import { server } from "@/utils/client";
import { Toast } from "antd-mobile";
import BigNumber from "bignumber.js";
import { useTranslations } from "next-intl";
import { useSearchParams } from "next/navigation";
import { FC, useEffect, useMemo, useState } from "react";

const getVipApi = async () => {
    return server
        .request<UserVipInfo>({
            url: "/v1/api/user/user_vip_info",
            method: "POST",
        })
        .then((res) => {
            if (res.code === 200) return res.data;
        });
};

const SignIn: FC = () => {
    const searchParams = useSearchParams();
    const activity_id = Number(searchParams.get("activity_id"));
    const t = useTranslations("signInPage");
    const tCode = useTranslations();
    const [vipInfo, setVipInfo] = useState<UserVipInfo | null>(null);
    const [visible, setVisible] = useState(false);
    const [amount, setAmount] = useState({});

    useEffect(() => {
        getVipInfo();
    }, []);
    const getVipInfo = async () => {
        const vipInfoRes = await getVipApi();
        if (vipInfoRes) {
            setVipInfo(vipInfoRes);
        }
    };

    const { getSignData, signData } = useSignStore((state) => ({
        signData: state.signData,
        getSignData: state.getSignData,
    }));
    useEffect(() => {
        getSignData({ activity_id });
    }, []);

    const curData = useMemo(() => {
        if (!signData || !signData.list || signData.cur_num == undefined) return null;
        return signData.list[signData.cur_num];
    }, [signData]);

    const doClaim = async () => {
        if (!curData) return null;
        try {
            const res = await claimActivityReward({
                activity_id,
                id: curData.id as number,
            });
            if (res.code === 200 && res?.data?.code === 1) {
                getSignData({ activity_id });
                if (res?.data?.reward) {
                    const amountObj: any = {};
                    res?.data?.reward.forEach((item: any) => {
                        amountObj[`coin_${item.coin_type}`] = formatAmount(item.amount);
                    });
                    //extra_reward
                    res?.data?.reward.forEach((item: any) => {
                        amountObj[`coin_${item.coin_type}`] = formatAmount(
                            new BigNumber(amountObj[`coin_${item.coin_type}`] || 0)
                                .plus(item.amount)
                                .toString()
                        );
                    });
                    setAmount(amountObj);
                }

                setVisible(true);
            } else {
                throw new Error(tCode(`code.400`));
            }
        } catch (error: any) {
            if (error) {
                Toast.show({
                    content: error.message || error.toString(),
                    maskClickable: false,
                });
            }
        }
    };

    return (
        <>
            <div className="relative h-[100%] w-[100%]">
                {/* 主题图片及背景 */}
                <div className="relative h-[3.1863rem]">
                    <img
                        src="/signDetails/themeBg.png"
                        alt=""
                        className="absolute h-[100%] w-[100%]"
                    />
                    <div className="relative top-[-0.3363rem] z-50 flex h-[3.0591rem] justify-center">
                        <img src="/signDetails/theme.png" alt="" className="h-[100%]" />
                    </div>
                    <div className="absolute bottom-[0.2136rem] z-50 h-[.3636rem] w-[100%]">
                        <img src="/signDetails/vip_bg.png" alt="" className="h-[100%] w-[100%]" />
                        <div className="absolute top-0 h-[100%] w-[100%] px-[0.25rem] text-[white]">
                            <img
                                src="/signDetails/vip.png"
                                alt=""
                                className="absolute top-[10%] h-[80%]"
                            />
                            <div className="relative left-[10%] h-[100%]">
                                <p className="h-[50%] text-[0.12rem] font-bold leading-[0.2rem]">
                                    VIP {vipInfo?.vip_level || 0}
                                </p>
                                <p className="h-[50%] text-[0.1rem] font-bold leading-[0.12rem]">
                                    quanto maior o nível VlP, mais abundantes s?o as recompensas
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                {/* 活动背景 */}
                <div className="absolute top-[2.9727rem] w-[100%]">
                    {/* 右上角文本 */}
                    <div className="absolute right-[0.1rem] top-0 z-50 h-[0.32rem] w-[20%] text-center text-[0.11rem] font-bold text-[white]">
                        <p className={"h-[0.16rem]"}>
                            {signData?.cur_num ? signData?.cur_num + 1 : 0}
                        </p>
                        <p className={"h-[0.16rem] text-[yellow]"}>
                            Day {signData?.list?.length || 0}
                        </p>
                    </div>
                    <img
                        src="/signDetails/bg3.png"
                        alt=""
                        className="z-1 absolute h-[100%] w-[100%]"
                    />
                    {/* 免费盒子 */}
                    <div className="mt-[0.4227rem]">
                        <BoxListCom type="page" />
                    </div>
                    {/* 充值盒子 */}
                    {/* <div className="h-[1.3273rem]">
                        <PayBoxList type="page" />
                    </div> */}
                    {/* 签到按钮 */}
                    <div
                        className={"relative mt-[0.25rem] flex h-[.6045rem] justify-center"}
                        onClick={doClaim}
                    >
                        <img src="/sign/button.png" className={"h-[100%]"} alt="" />
                        <span className="absolute text-[0.16rem] font-bold leading-[0.375rem] text-[white]">
                            Sign-in
                        </span>
                    </div>
                    {/* 活动描述文本背景 */}
                    <div className="relative flex h-[4.4rem] justify-center">
                        <div className="relative h-[100%]">
                            <img src="/signDetails/bg2.png" className={"h-[100%]"} alt="" />
                            <div className="absolute top-0 h-[100%] w-[100%]">
                                {/* title标题 */}
                                <div className="h-[0.425rem] text-center text-[.18rem] font-bold leading-[0.425rem] text-[white]">
                                    <p>Activity dedscription</p>
                                </div>
                                {/* 描述内容 */}
                                <div className="h-[3.3455rem] w-[100%] px-[0.15rem] py-[0.2091rem]">
                                    <ul
                                        className={
                                            "break-word list-decimal pl-[.2455rem] pr-[.1rem] pt-0 text-[.14rem] leading-[.23rem] text-[white]"
                                        }
                                    >
                                        <li>{t("desc1")}</li>
                                        <li>{t("desc2")}</li>
                                        <li>{t("desc3")}</li>
                                        <li>{t("desc4")}</li>
                                        <li>{t("desc5")}</li>
                                        <li>{t("desc6")}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <GlobalNotify
                    amount={amount}
                    visible={visible}
                    onChange={() => setVisible(false)}
                    deraction={5000}
                ></GlobalNotify>
            </div>
        </>
    );
};
export default SignIn;